<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <title>学术</title>
  <style>
		html, body {width: 100%;min-height: 100%;background: #fff;}
		.h20 {height: 0.5rem;}


    #header_top {
        background: #2997e4;
        padding-top: 25px;
    }
    .detail_con {
      padding: 1rem;
      margin-bottom: 3rem;
    }
    .detail_title h3 {
      font-size: 0.9rem;
      color: #333;
    }
    .detail_tit_sm h4 {
      font-size: 0.75rem;
      color: #333;
      font-weight: bold;
      line-height: 1.2rem;
    }
    .detail_addtime h6 {
      font-size: 0.6rem;
      color: #999;
      margin: 1rem 0;
    }
    .detail_text p {
      font-size: 0.75rem;
      line-height: 1.2rem;
      color: #333;
      margin: 1rem 0;
    }
    .detail_text img {
      max-width: 100%;
      display: inline-block;
    }
    .detail_like {
      text-align: center;
      border-top: 1px solid #f0f0f0;
      display: block;
      width: 100%;
      margin: 0;
      padding: 0.5rem 1rem;
    }
    .detail_like img {
      width: 1rem;
      display: inline-block;
    }
    .aui-list-item-title {}
    .detail_pl {
      margin: 0 -1rem;
      padding: 0.5rem 1rem;
      border-top: 0.5rem solid #f0f0f0;
    }
    .detail_pl .aui-media-list-item-inner {
      -webkit-box-align: start;
      box-align: start;
      -webkit-align-items: flex-start;
      align-items: flex-start;
    }
    .detail_pl .aui-list-item-right {}
    .detail_pl .aui-list-item-text {
      font-size: 0.75rem;
      line-height: 1rem;
      color: #333;
    }
    .detail_pl .aui-list-item-text span {
      color: #999;
      font-size: 0.6rem;
    }
    .detail_pl .aui-list-item-right > div {
      color: #999;
      display: inline-block;
    }
    .detail_pl .aui-list-item-right > div img {
      width: 0.6rem;
      display: inline-block;
    }
    .detail_pl .aui-list-item-right > div:first-child {
      margin-right: 0.6rem;
    }
    .detail_pl .aui-list-item-right > div:nth-child(2) {}
    .detail_pl .text_inner {
      background: #f0eff5;
      padding: 0.3rem;
      margin-top: 0.5rem;
    }
    .detail_pl .text_inner ul {}
    .detail_pl .text_inner ul li {
      color: #666;
      line-height: 1.2rem;
      font-size: 0.75rem;
    }
    .detail_pl .text_inner ul li span {
      color: #333;
      font-weight: bold;
      font-size: 0.75rem;
    }
    .detail_pl .text_inner ul li img {
      width: 0.3rem;
      display: inline-block;
    }
    .detail_pl .aui-list-item {
      padding-left: 0;
    }
    .detail_talk {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #fff;
      padding: 0.25rem;
      border-top: 1px solid #f0f0f0;
    }
    .detail_talk {
      padding-right: 3.6rem;
    }
    .detail_talk .detail_talk_inp {
      width: 100%;
      display: inline-block;
      border: 1px solid #999;
      -webkit-border-radius: 0.8rem;
      -moz-border-radius: 0.8rem;
      border-radius: 0.8rem;
      padding: 0 1rem;
    }
    .detail_talk .detail_talk_inp input{
      font-size: 0.7rem;
      height: 1.6rem;
    }
    .detail_talk_ri {
      position: absolute;
      right: 0.2rem;
      bottom: 0;
    }
    .detail_talk_ri img {
      width: 1.2rem;
      margin: 0.2rem 0 0.2rem 0.4rem;
      display: inline-block;
    }
    .dataIco {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
    }
    #header_top {
      position: fixed;
      top:0;
      width: 100%;
    }
    .detail_con {
      padding-top: calc(1rem + 65px);
    }
	</style>
</head>
<body>
<header id="header_top" class="aui-bar aui-bar-nav" >

  <a class="aui-pull-left"  onclick="goback()">
      <span class="aui-iconfont aui-icon-left"></span>
  </a>
  <div class="aui-title" id="title">
  详情
</div>
    <!-- <a class="aui-pull-right" onclick="openSearch()">
        <span class="aui-iconfont aui-icon-search"></span>
    </a> -->
</header>
  <div id="app" v-cloak>
<div class="detail_con">
  <div class="detail_title">
    <h3 v-cloak>{{info.title}}</h3>
  </div>
  <div class="detail_addtime">
    <h6 v-cloak>{{info.createTime}}</h6>
  </div>
  <div class="detail_text">
    <div v-html="info.keywords"></div>
    <div v-html="info.content"></div>  </div>
  <div class="detail_like" v-cloak v-if="detail_type != 'lt' && detail_type != 'zc'">
    <span @click="likeClick()">
      <img src="../../image/focus.png" alt="" v-if="isLike">
      <img src="../../image/unfocus.png" alt="" v-else>
    </span>
    {{likeNum}}
  </div>
  <div class="detail_pl">
    <div class="detail_tit_sm">
      <h4>最新评论</h4>
    </div>
    <div class="aui-content">
      <ul class="aui-list aui-media-list">
        <li class="aui-list-item aui-list-item-middle" v-for="items in newsList" v-cloak>
          <div class="aui-media-list-item-inner">
            <div class="aui-list-item-media" style="width: 4rem;">
              <!-- <img :src="items.userImage" class=""> -->
              <div v-if="items.userImage" class="dataIco aui-img-round aui-list-img-sm" :style="'background: url('+ items.userImage +') center/cover no-repeat'"></div>
              <div v-else class="dataIco aui-img-round aui-list-img-sm" style="background: url(../../image/wdr@3x.png) center/cover no-repeat"></div>
            </div>
            <div class="aui-list-item-inner">
              <div class="aui-list-item-text">
                <div class="aui-list-item-title aui-font-size-14">{{items.username}}</div>
              </div>
              <div class="aui-list-item-text">
                <span>{{items.create_date}}</span>
                <div class="aui-list-item-right">
                  <div @click="commentLikeClick(items.isLike, items.id)">
                    <img src="../../image/dz1@3x.png" alt="" v-if="items.isLike == 1">
                    <img src="../../image/dz2@3x.png" alt="" v-else-if="items.isLike == 0">
                    {{items.likenum}}
                  </div>
                  <div @click="doCommment(items.id)">
                    <img src="../../image/hf@3x.png" alt="">
                    回复
                  </div>
                </div>
              </div>
              <div class="aui-list-item-text">
                {{items.content}}
              </div>
              <div class="aui-list-item-text text_inner" v-if="items.chirldList.length > 0">
                <ul>
                  <li v-for="item in items.chirldList"><span>{{item.username}}：</span>{{item.content}}</li>
                  <!-- <li>查看全部{{items.chirldList.length}}条评论 <img src="../../image/jr2@3x.png" alt=""></li> -->
                </ul>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="detail_talk" :style="{'padding-right': detail_type != 'lt' ? '' : '0.25rem'}">

  <div class="detail_talk_inp">
    <input id="detail_talk_input" @click="doCommment('')" type="text" placeholder="我来说两句..." @keydown.enter="addComment()" v-model="comment_content">
  </div>
  <div class="detail_talk_ri" v-if="detail_type != 'lt'">
    <img v-if="isData.iscollect == 0" class="sc" src="../../image/shoucang@3x.png" @click="sc(1)" alt="">
    <img v-else class="sc" src="../../image/shoucang2@3x.png" @click="sc(0)" alt="">
    <img src="../../image/fx@3x.png" onclick="fx()" alt="">
  </div>
</div>

</div>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript">
  function goback () {
    api.closeWin({name:api.pageParam.name});
  }
apiready = function() {
  document.getElementById('title').innerHTML = api.pageParam.title
  var app = new Vue({
    el: '#app',
    data: {
      id: 0,
      info: {},
      isLike: 0,
      likeNum: 0,
      token: 0,
		  page: 1,
      totalpage: 1,
      newsList: [],
      comment_content: '',
      isData: [],
      detail_type: ''
    },
    created: function() {
      var $_this = this;
      $_this.id = api.pageParam.id
      $_this.detail_type = api.pageParam.detail_type || ''
      $_this.token = $api.getStorage('token')
      if(!$api.getStorage('token')){
        api.confirm( {
            title: '是否登录',
            msg: '确认是否登录？',
            buttons: [ '确定', '取消' ]
          }, function ( ret, err ) {
            var index = ret.buttonIndex;
            if ( index == 1 ) {
              api.openWin({
                name: 'login',
                url: '../five_frame/login_header.html',
                delay: 200,
                bounces: false
              });
              return;
            } else {
              api.closeWin({
                  name: name
              });
              return
            }
          })
          return
        }
// console.log($_this.id)
      api.ajax({
        url: window.Url.getArticleDetail + $_this.id,
        timeout: 300,
        headers: {
					  'baseParams': $api.getStorage('token') //token
					},
      }, function(ret, err) {
          if (ret) {
              // api.alert({ msg: JSON.stringify(ret) });
              if (ret.data.length == 0) return
              $_this.info = ret.data[0]
          } else {
              api.alert({ msg: JSON.stringify(err) });
          }
      })
      $_this.issc()
      $_this.articleLikenumCount()
      $_this.isArticleLikenum()

      $_this.getCommentList()
      var scroll = new auiScroll({
            listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
            distance:40 //判断到达底部的距离，isToBottom为true
        },function(ret){
           if (ret.isToBottom) {
             $_this.page ++
             if ($_this.page > $_this.totalpage) {
               $_this.page = $_this.totalpage
               return
             }
             api.ajax({
               url: window.Url.getCommentList + $_this.id + '/' + $_this.page,
     					timeout: 300,
              headers: {
					  'baseParams': $api.getStorage('token') //token
					},
     				}, function(ret, err) {
     				    if (ret) {
     				       //  api.alert({ msg: JSON.stringify(ret) });
     								$_this.newsList = $_this.newsList.concat(ret.data.newsList)
     				    } else {
     				        api.alert({ msg: JSON.stringify(err) });
     				    }
     				})
           }

        });
    },
    methods: {
      issc:function() {
        var $_this = this;
        api.ajax({
          url: window.Url.islikeCollectAndCount + $_this.id,
          headers: {
            'baseParams': $_this.token //token
          },
          timeout: 300,
        }, function(ret, err) {
            if (ret) {
                // api.alert({ msg: JSON.stringify(ret) });
                if (ret.code == 2) {
                  alert('用户未登录，请返回登录')
                  $api.rmStorage('token')
                  $api.rmStorage('data')
                  goback()
                   return
                }
                $_this.isData = ret.data
            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })
      },
       sc:function (is) {
         var $_this = this;
        if(is == 1) {
          api.ajax({
            url: window.Url.addArticleCollect,
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'baseParams': $_this.token //token
            },
            data:{
              body:{
                article_id: $_this.id
              }
            },
            timeout: 300,
          }, function(ret, err) {
              if (ret) {
                  api.openFrame ({
                    name: 'collection',
                    url: './collection.html',
                    pageParam:{title: "已收藏"},
                    rect:{
                      x:0,
                      y:0,
                      w:'auto',
                      h:'auto'
                    },
                    bounces: false,
                    delay:200
                  })
                  $_this.issc()
              } else {
                  api.alert({ msg: JSON.stringify(err) });
              }
          })
        } else if(is == 0) {
          api.ajax({
            url: window.Url.cancelArticleCollect + $_this.id,
            method: 'GET',
            headers: {
              'Content-Type': 'application/json',
              'baseParams': $_this.token //token
            },
            timeout: 300,
          }, function(ret, err) {
              if (ret) {
                  api.openFrame ({
                    name: 'collection',
                    url: './collection.html',
                    pageParam:{title: "已取消收藏"},
                    rect:{
                      x:0,
                      y:0,
                      w:'auto',
                      h:'auto'
                    },
                    bounces: false,
                    delay:200
                  })
                  $_this.issc()
              } else {
                  api.alert({ msg: JSON.stringify(err) });
              }
          })
        }

      },
      doCommment: function (id) {
        $api.byId('detail_talk_input').focus()
        this.comment_id = id
        // alert(this.comment_id)
      },
      articleLikenumCount: function () {
        var $_this = this;
        api.ajax({
          url: window.Url.articleLikenumCount + $_this.id,
          timeout: 300,
        }, function(ret, err) {
            if (ret) {
                // api.alert({ msg: JSON.stringify(ret) });
                $_this.likeNum = ret.data.count
            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })
      },
      isArticleLikenum: function () {
        var $_this = this;
        api.ajax({
          url: window.Url.isArticleLikenum + $_this.id,
          timeout: 300,
          headers: {
            'baseParams': $_this.token //token
          },
        }, function(ret, err) {
            if (ret) {
                // api.alert({ msg: JSON.stringify(ret) });

                if (ret.code == 2) {
                  // alert('用户未登录，请返回登录is')
                  // $api.rmStorage('token')
                  // $api.rmStorage('data')
                  // goback()
                   return
                } else if (ret.code == 0) {
                  $_this.isLike = 1
                } else if (ret.code == 5) {
                  $_this.isLike = 0
                } else {
                  api.alert({ msg: JSON.stringify(ret.message) });
                }
            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })
      },
      addArticleListnum: function () {
        var $_this = this;
        api.ajax({
          url: window.Url.addArticleListnum,
          timeout: 300,
          method: 'post',
          headers: {
            'Content-Type': 'application/json',
            'baseParams': $_this.token //token
          },
          data: {
            body: {
              article_id: $_this.id
            }
          }
        }, function(ret, err) {
            if (ret) {
                // api.alert({ msg: JSON.stringify(ret) });

                $_this.articleLikenumCount()
                $_this.isArticleLikenum()
            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })
      },
      cancelArticleLikenum: function () {
        var $_this = this;
        api.ajax({
          url: window.Url.cancelArticleLikenum + $_this.id,
          timeout: 300,
          headers: {
            'baseParams': $_this.token //token
          },
        }, function(ret, err) {
            if (ret) {
              // api.alert({ msg: JSON.stringify(ret) });
                        $_this.articleLikenumCount()
                        $_this.isArticleLikenum()
            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })

      },
      likeClick: function () {
        var $_this = this;
        if ($_this.isLike) {
          $_this.cancelArticleLikenum()
        } else {
          $_this.addArticleListnum()
        }
      },
      getCommentList: function () {
        var $_this = this;
        api.ajax({
          url: window.Url.getCommentList + $_this.id + '/' + $_this.page,
          timeout: 300,
          headers: {
					  'baseParams': $api.getStorage('token') //token
					},
        }, function(ret, err) {
            if (ret) {
              // console.log(window.Url.getCommentList + $_this.id + '/' + $_this.page)
              // api.alert({ msg: JSON.stringify(ret) });

              if (ret.code == 2) {
                // alert('用户未登录，请返回登录is')
                // $api.rmStorage('token')
                // $api.rmStorage('data')
                // goback()
                   return
                } else if (ret.code == 1) {
                return
              }
              $_this.newsList = ret.data.newsList

            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })
      },
      addComment: function () {
        var $_this = this;
        api.ajax({
          url: window.Url.addComment,
          timeout: 300,
          method: 'post',
          headers: {
            'Content-Type': 'application/json',
            'baseParams': $_this.token //token
          },
          data: {
            body: {
              article_id: $_this.id,
              id: $_this.comment_id,
              content: $_this.comment_content
            }
          }
        }, function(ret, err) {
            if (ret) {
                // api.alert({ msg: JSON.stringify(ret) });
                $_this.comment_content = ''
                $api.byId('detail_talk_input').blur()

                $_this.getCommentList()
            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })
      },
      addCommentLikenum: function (comment_id) {
        var $_this = this;
        api.ajax({
          url: window.Url.addCommentLikenum,
          timeout: 300,
          method: 'post',
          headers: {
            'Content-Type': 'application/json',
            'baseParams': $_this.token //token
          },
          data: {
            body: {
              comment_id: comment_id
            }
          }
        }, function(ret, err) {
            if (ret) {
                // api.alert({ msg: JSON.stringify(ret) });
                $_this.isCommentLikenum(comment_id)
            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })
      },
      cancelCommentLikenum: function (id) {
        var $_this = this;

        api.ajax({
          url: window.Url.cancelCommentLikenum + id,
          timeout: 300,
          headers: {
            'baseParams': $_this.token //token
          }
        }, function(ret, err) {
            if (ret) {
              // api.alert({ msg: JSON.stringify(ret) });
              $_this.isCommentLikenum(id)
            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })
      },
      isCommentLikenum: function (id) {
        var $_this = this;
        api.ajax({
          url: window.Url.isCommentLikenum + id,
          timeout: 300,
          headers: {
            'baseParams': $_this.token //token
          },
        }, function(ret, err) {
            if (ret) {
                // api.alert({ msg: JSON.stringify(ret) });
                if (ret.code == 0) {
                  for (var i = 0; i < $_this.newsList.length; i++) {
                    if ($_this.newsList[i].id == id) {
                      $_this.newsList[i].isLike = 1
                      $_this.commentLikenumCount(id)
                    }
                  }
                } else if (ret.code == 5) {
                  for (var i = 0; i < $_this.newsList.length; i++) {
                    if ($_this.newsList[i].id == id) {
                      $_this.newsList[i].isLike = 0
                      $_this.commentLikenumCount(id)
                    }
                  }
                } else {
                  api.alert({ msg: JSON.stringify(ret.message) });
                }
            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })
      },
      commentLikenumCount: function (id) {
        var $_this = this;
        api.ajax({
          url: window.Url.commentLikenumCount + id,
          timeout: 300,
          headers: {
            'baseParams': $_this.token //token
          },
        }, function(ret, err) {
            if (ret) {
                // api.alert({ msg: JSON.stringify(ret) });
                for (var i = 0; i < $_this.newsList.length; i++) {
                  if ($_this.newsList[i].id == id) {
                    $_this.newsList[i].likenum = ret.data.count
                  }
                }
            } else {
                api.alert({ msg: JSON.stringify(err) });
            }
        })
      },
      commentLikeClick: function (isLike, id) {
        var $_this = this;
        if (isLike) {
          $_this.cancelCommentLikenum(id)
        } else {
          $_this.addCommentLikenum(id)
        }
      }
    }
  })
}


  function fx () {
    api.openFrame ({
      name: 'share',
      url: './share.html',
      rect:{
        x:0,
        y:0,
        w:'auto',
        h:'auto'
      },
      bounces: false,
      delay:200
    })
    api.closeFrame({name:'more'});
  }
</script>
</body>
</html>
